<template>
    <div>
        <div class="menu">
            <div style="height: 15px;"></div>

            <div v-for="(m,index) in menu">
                <div v-bind:class="[changIndexColor == index ? 'change' : '', 'menu-one' ]" :key="index" @click="doClick(index,menu[index].twoMenu.length)">
                    <div>
                        <i class="el-icon-s-opportunity"></i>{{m.name}}
                    </div>

                    <template v-if="menu[index].twoMenu.length != 0">
                        <i v-bind:class="[changIndex == index  && show ? 'aa' : 'go', 'el-icon-caret-top' ]" ></i>
                    </template>
                </div>
                <div class="menu-two" v-if="changIndex == index && show">
                    <template v-for="(tm,i) in menu[index].twoMenu">

                        <template v-if="changTwoIndex == i && changIndexColor == index">
                            <div class="change-two">{{tm.name}}</div>
                        </template>
                        <template v-if="changTwoIndex != i || changIndexColor != index">
                            <div @click="twoClick(index,i)" class="menu-two-div">{{tm.name}}</div>
                        </template>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                show: true,
                changIndex: 0,
                changIndexColor:0,
                changTwoIndex: 0
            }
        },
        props: {
            menu: Array,
            change: ''
        },
        methods: {
            doClick(index,le){
                if(index == this.changIndex){
                    this.show= !this.show;
                }else{
                    this.show=true
                }
                this.changIndex = index;
                if(le==0){
                    this.changIndexColor= index
                }
            },
            twoClick(index,i){
                this.changTwoIndex = i;
                this.changIndexColor = index;
            },
            kitLoad(val){
                console.log(val)
                if(val==0){
                    this.changIndex = 0,
                        this.changIndexColor = 0,
                        this.changTwoIndex = 0
                }
            }
        }
    }
</script>

<style>
    @import "menu.css";
</style>
